/* CSS Document */

/* 
 * Nanum Gothic (Korean) http://www.google.com/webfonts/earlyaccess
 */
@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo');

*{ margin:0; padding:0}
html, body {width:100%}
body{position:relative; padding: 0; margin:0; font-family: 'NanumSquareRound',sans-serif; font-size:13px}
pre,code{font-family: 'NanumSquareRound',sans-serif}
img,fieldset{border:0}
img {vertical-align:top}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:none}
.clearfix {*zoom:1}
.clearfix:after {content:''; display:block; clear:both}
button {cursor:pointer}
.padding10 {padding:10px}

.go_top { position:fixed; z-index:3; right:10px; bottom:10px; display:none;}
.go_top img { width:60px }





.youtube {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.youtube iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}



#section6 #s3 {
	background-color:rgba(255,255,255,0.9); 
	border-radius:30px;
	box-shadow:10px 10px 10px rgba(0,0,0,0.2);

	padding:30px;
}
#section6 #s1 {
	background-color:rgba(255,255,255,0.9); 
	border-radius:30px;
	box-shadow:10px 10px 10px rgba(0,0,0,0.2);
	padding:20px 30px 10px 30px;
}

#section6 .row {margin-bottom:10px}



.icon1 .insta{
	filter:grayscale(0.5);
}
.icon1:hover .insta{
	animation: insta 0.2s 0s 1 ease-in forwards alternate;
}
@keyframes insta{
	0% { filter:grayscale(0.5); margin-top:0}
	100% { filter:grayscale(0); margin-top:-3px}
}
.icon2 .kakao{
	filter:grayscale(0.5);
}
.icon2:hover .kakao{
	animation: kakao 0.2s 0s 1 ease-in forwards alternate;
}
@keyframes kakao{
	0% { filter:grayscale(0.5); margin-top:0}
	100% { filter:grayscale(0); margin-top:-3px}
}
.icon3 .youtube{
	filter:grayscale(0.5) brightness(100%);
}
.icon3:hover .youtube{
	animation: youtube 0.2s 0s 1 ease-in forwards alternate;
}
@keyframes youtube{
	0% { filter:grayscale(0.5); margin-top:0}
	100% { filter:grayscale(0); margin-top:-3px}
}



.f-center {text-align:center;}
.f-pink {color:#f65268}
.f-orange {color:#ff682d}
.f-vt {color:#695791}
.f-blue {color:#007690}
.f-green {color:#00965d}
.f-yel {color:#fb9f00}
.f-grey {color:#888888}
.f-wt {color:#fff}

nav li {
	font-size: 14px;
	padding: 3px 0;
}


#nav_m {position:fixed; z-index:3; background-color:#222; width:100%; height:50px;}
#nav_m a {font-size:15px; color:#fff;}
#nav_m #sub {border-right:1px solid #555555; height:50px; padding-top:15px;}
#nav_m #sub:hover {background-color:#000;}

#section2 .f1 {color:#fff; }
#section4 .f1 {color:#00683f;}
#section3 .f1 {color:#007690;}
#section5 .f1 {color:#fff;}
#section6 .f1 {color:#fff;}


#section2 h2 {
	text-align:center;	
	padding-bottom:20px; 
}

#section7 img {padding:20px 0}
#section7 p {padding:20px 10px}

.bottom {
	position:absolute;
	bottom:0;
}
.bottom img {
	width:80%;
}
.bottom2 {
	width:100%;
	height:auto;
	position:relative;
}
.bottom2 > img{ 
	position:absolute;
	width:100%;
	bottom:0;
	right:0;
}









@media all and (min-width:320px) {
	/* Scrollspy */
	#section1 {}
	#section2 {padding:50px 15px 15px 15px; background-color:#fbca51;}
	#section4 {padding:50px 15px 15px 15px; background-color:#e6e6e6;}
	#section3 {padding:50px 15px 15px 15px; background-image:url("../img/section4_bg.gif"); }
	#section5 {padding:50px 30px 15px 30px; background-color:#a0d4df; }
	#section6 {padding:50px 15px 15px 15px; background-image:url("../img/section5_bg.jpg"); background-size:100%; background-attachment: fixed;}
	#section7 {padding:30px 15px 15px 15px; background-color: #fff;}
	#section8 {
		padding:50px 15px 100px 15px;color: #fff; 
		background-color: #f6a39f; 
		background-image:url("../img/section8_bg.png"); 
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size:100%;
		background-position: center bottom;
	}

	#section2 #s4 {
		margin:0;
		background-color:rgba(255,255,255,0.8); 
		border-radius:20px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		padding:10px;
	}

	#section2 #s1 {
		background-color:rgba(255,255,255,0.8); 
		border-radius:20px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		padding:15px;
		margin-top:10px; 
	}
	#section2 #s3 {
		background-color:rgba(255,255,255,0.8); 
		border-radius:20px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		background-image: url("../img/section2_img1m.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size:100%;
		padding:15px 15px 80px 15px;
		margin-top:10px; 
	}
	#section2 #s2 {
		background-color:rgba(255,255,255,0.8); 
		border-radius:20px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size:100%;
		padding:10px;
		margin:10px 0 0 0;
	}
	#section2 #s2 #box {margin:30px 0;}
	#section4 img {padding:20px; width:100%; margin:0 auto;}
	#section3 img {width:100%; margin:0 auto; padding:10px;}
	#section5 #box {background-color:rgba(255,255,255,0.7); border:1px solid #fff; border-radius:15px; padding:10px}
	#section5 img {width:280px}



	.button_vt {
		padding:8px 15px;
		border:2px solid #d958a4;
		border-radius:30px;
		font-size:15px;
		background-color:#fef4dc;
		color:#d958a4;
	}
	.button_vt:hover {
		background-color:#d958a4;
		border:2px solid #d958a4;
		color:#ffffff;
	}

	.button_bl {
		padding:8px 15px;
		border:1px solid #2d99b1;
		background-color: #fef4dc;
		font-size:15px;
		color:#fff;
	}
	.button_bl:hover {
		background-color:#1d6e80;
		border:1px solid #1d6e80;
	}
	.button_orange {
		padding:8px 15px;
		border:2px solid #f2613a;
		border-radius:30px;
		font-size:15px;
		background-color:#fef4dc;
		color:#e95927;
	}
	.button_orange:hover {
		background-color:#f2613a;
		border:2px solid #f2613a;
		color:#ffffff;
	}
	.button_green {
		padding:8px 15px;
		border:2px solid #71b125;
		border-radius:30px;
		font-size:15px;
		background-color:#fef4dc;
		color:#71b125;
	}
	.button_green:hover {
		background-color:#71b125;
		border:2px solid #71b125;
		color:#ffffff;
	}

	.invisibla {
		opacity:0;
		transition:opacity 1s ease;
	}
	.visible {
		opacity:1;
	}




	.f1 {font-size:30px; text-align:center; font-weight:bold; padding-bottom:10px; text-align:center;	}
	.f2 {font-size:24px; margin:10px 0;}
	.f3 {font-size:15px; line-height:160%}
	.f4 {font-size:13px; line-height:140%}



	.display_pc { display:none;}
	.display_desktop { display:none;}

	.wrapper {
		width:100%;
		height:auto;
		padding-top: 120%;
		position:relative;
		background-color:#addce2;
		background-size: 1000px;
		overflow: hidden;
	}
	.wrapper .flower_top{
		position:absolute;
		top:50px; 
		animation: flower_top 1.0s 0s 1 ease-in forwards normal;
	}
	@keyframes flower_top{
		0% { opacity:0; margin:-50px 0 0 0;}
		30% { opacity:0; margin:-50px 0 0 0;}
		100% { opacity:1; margin:0; }
	}
	.wrapper .flower_bt{
		position:absolute;
		bottom:0; 
		animation: flower_bt 3s 0s infinite ease-in forwards alternate;

	}
	@keyframes flower_bt{
		0% { margin:0 0 -15px 0;}
		100% { margin:0; }
	}
	.wrapper .jesus{
		position:absolute;
		bottom:0; 
		right:-30px;
		animation: jesus 2s 0s infinite ease-in forwards alternate;
		transform-origin: right;
	}
	@keyframes jesus{
		0% { transform: rotate(0deg);}
		100% { transform: rotate(-3deg);}
	}

	.wrapper .girl{
		position:absolute;
		bottom:-10px; 
		animation: girl 5s 0s infinite ease-in forwards alternate;
	}
	@keyframes girl{
		0% { margin:0 0 0 0;}
		10% { margin:0 0 -5px 5px;}
		20% { margin:0 0 0 10px;}
		30% { margin:0 0 -5px 15px;}
		40% { margin:0 0 0 20px;}
		50% { margin:0 0 -5px 25px;}
		60% { margin:0 0 0 30px;}
		70% { margin:0 0 -5px 35px;}
		80% { margin:0 0 0 40px;}
		90% { margin:0 0 -5px 45px;}
		100% { margin:0 0 0 50px;}
	}
	.wrapper .boy{
		position:absolute;
		bottom:100px;
		left:-40px; 
		animation: boy 2s 0s infinite ease-in forwards alternate;
		transform-origin: left;
	}
	@keyframes boy{
		0% { transform: rotate(0deg);}
		50% { transform: rotate(0deg);}
		100% { transform: rotate(-3deg);}
	}
	.wrapper .titleimg{
		position:absolute;
		top:90px;
		animation: titleimg 2.0s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
		transform-origin: center;
	}

	@keyframes titleimg{
		0% { opacity:0; transform: scale(0.5, 0.5);}
		70% { opacity:0; transform: scale(0.5, 0.5);}
		100% { opacity:1; transform: scale(1, 1); }
	}
	.wrapper .seed1{
		position:absolute;
		top:90px;
		left:0;
		animation: seed1 2.8s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed1{
		0% { opacity:0; transform: translate(50px, 100px);}
		90% { opacity:0; transform: translate(50px, 100px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper .seed2{
		position:absolute;
		top:200px;
		right:0;
		animation: seed2 2.9s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed2{
		0% { opacity:0; transform: translate(50px, 100px);}
		90% { opacity:0; transform: translate(50px, 100px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper .seed3{
		position:absolute;
		top:200px;
		left:0;
		animation: seed3 3s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed3{
		0% { opacity:0; transform: translate(-100px, 50px);}
		90% { opacity:0; transform: translate(-100px, 50px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper .seed4{
		position:absolute;
		top:100px;
		right:0;
		animation: seed4 3.1s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed4{
		0% { opacity:0; transform: translate(-100px, 50px);}
		90% { opacity:0; transform: translate(-100px, 50px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper p.bible{
		position:absolute;
		top:57%;
		left:50%;
		margin-left:-90px;
		border:1px solid rgba(29,109,119); 
		border-radius:15px;
		padding:5px; 
		text-align:center;
		color:#ffffff;
		font-size:11px;
		width:180px; 
		background: rgba(29,109,119,0.5);
		animation: titletext 4s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes titletext{
		0% { opacity:0; transform: translate(0, 20px);}
		90% { opacity:0; transform: translate(0, 20px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper p.title{
		position:absolute;
		top:40px;
		left:50%;
		margin-left:-120px;
		border:1px solid rgba(29,92,56); 
		border-radius:0 0 30px 30px; 
		padding:15px 10px 4px 10px; 
		text-align:center;
		color:#ffffff;
		font-size:12px;
		width:240px; 
		background: rgba(29,92,56,0.8);
	}
}


@media all and (min-width:768px) {
/* Scrollspy */
	#section1 {}
	#section2 {padding:60px 30px 30px 30px;background-image:url("../img/section2_bg.jpg"); background-size:100%; background-attachment: fixed;}
	#section4 {padding:60px 30px 30px 30px;background-color: #e6e6e6;}
	#section3 {padding:60px 30px 30px 30px;background-image:url("../img/section4_bg.gif"); }
	#section5 {padding:60px 30px 30px 30px;background-color:#a0d4df; }
	#section6 {padding:60px 30px 30px 30px;background-image:url("../img/section5_bg.jpg"); background-size:100%; background-attachment: fixed;}
	#section7 {padding:40px 30px 30px 30px;background-color: #fff;}
	#section8 {
		padding:50px 50px 230px 50px;color: #fff; 
		background-color: #f6a39f; 
		background-image:url("../img/section8_bg.png"); 
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size:80%;
		background-position: center bottom;
	}

	#section2 #s4 {
		margin:0 0 15px 0;
		background-color:rgba(255,255,255,0.8); 
		border-radius:30px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		padding:30px;
	}

	#section2 #s1 {
		margin-top:0; 
		background-color:rgba(255,255,255,0.8); 
		border-radius:20px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		padding:30px;
		margin:15px 0 30px 0;
	}
	#section2 #s3 {
		background-color:rgba(255,255,255,0.8);  
		border-radius:20px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		background-image: url("../img/section2_img1m.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size:100%;
		padding:30px;
		margin:15px 0 30px 0;
	}
	#section2 #s2 {
		background-color:rgba(255,255,255,0.8);  
		border-radius:20px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		padding:30px;
		margin:0;
	}
	#section4 img {padding:20px; width:100%; margin:0 auto;}
	#section4 .text {padding:30px 0;}
	#section3 img {width:80%; margin:0 auto; padding:20px;}
	#section5 #box {background-color:rgba(255,255,255,0.7); border:1px solid #fff; border-radius:15px; padding:10px}
	#section5 img {width:318px}



		.button_vt {
		padding:10px 20px;
		border:2px solid #d958a4;
		border-radius:30px;
		font-size:18px;
		background-color:#fef4dc;
		color:#d958a4;
	}
	.button_vt:hover {
		background-color:#d958a4;
		border:2px solid #d958a4;
		color:#ffffff;
	}

	.button_bl {
		padding:10px 20px;
		border:1px solid #2d99b1;
		background-color: #fef4dc;
		font-size:16px;
		color:#fff;
	}
	.button_bl:hover {
		background-color:#1d6e80;
		border:1px solid #1d6e80;
	}
	.button_orange {
		padding:10px 20px;
		border:2px solid #f2613a;
		border-radius:30px;
		font-size:18px;
		background-color:#fef4dc;
		color:#e95927;
	}
	.button_orange:hover {
		background-color:#f2613a;
		border:2px solid #f2613a;
		color:#ffffff;
	}
	.button_green {
		padding:10px 20px;
		border:2px solid #71b125;
		border-radius:30px;
		font-size:18px;
		background-color:#fef4dc;
		color:#71b125;
	}
	.button_green:hover {
		background-color:#71b125;
		border:2px solid #71b125;
		color:#ffffff;
	}

	.invisibla {
		opacity:0;
		transition:opacity 1s ease;
	}
	.visible {
		opacity:1;
	}




	.display_pc { display:block;}
	.display_m { display:none;}
	.display_desktop { display:none;}

	.wrapper {
		width:100%;
		height:auto;
		padding-top: 65%;
		position:relative;
		background-color:#addce2;
		background-size: 1000px;
		overflow: hidden;
	}
	.wrapper .flower_top{
		position:absolute;
		top:50px; 
		width:100%
		animation: flower_top 1.0s 0s 1 ease-in forwards normal;
	}
	@keyframes flower_top{
		0% { opacity:0; margin:-50px 0 0 0;}
		30% { opacity:0; margin:-50px 0 0 0;}
		100% { opacity:1; margin:0; }
	}
	.wrapper .flower_bt{
		position:absolute;
		bottom:0; 
		animation: flower_bt 3s 0s infinite ease-in forwards alternate;

	}
	@keyframes flower_bt{
		0% { margin:0 0 -15px 0;}
		100% { margin:0; }
	}
	.wrapper .jesus{
		position:absolute;
		bottom:0; 
		animation: jesus 2s 0s infinite ease-in forwards alternate;
		transform-origin: right;
	}
	@keyframes jesus{
		0% { transform: rotate(0deg);}
		100% { transform: rotate(-3deg);}
	}

	.wrapper .girl{
		position:absolute;
		bottom:-20px; 
		animation: girl 5s 0s infinite ease-in forwards alternate;
	}
	@keyframes girl{
		0% { margin:0 0 0 0;}
		10% { margin:0 0 -5px 5px;}
		20% { margin:0 0 0 10px;}
		30% { margin:0 0 -5px 15px;}
		40% { margin:0 0 0 20px;}
		50% { margin:0 0 -5px 25px;}
		60% { margin:0 0 0 30px;}
		70% { margin:0 0 -5px 35px;}
		80% { margin:0 0 0 40px;}
		90% { margin:0 0 -5px 45px;}
		100% { margin:0 0 0 50px;}
	}
	.wrapper .boy{
		position:absolute;
		bottom:160px;
		left:-20px; 
		animation: boy 2s 0s infinite ease-in forwards alternate;
		transform-origin: left;
	}
	@keyframes boy{
		0% { transform: rotate(0deg);}
		50% { transform: rotate(0deg);}
		100% { transform: rotate(-3deg);}
	}
	.wrapper .titleimg{
		position:absolute;
		top:100px;
		animation: titleimg 2.0s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
		transform-origin: center;
	}

	@keyframes titleimg{
		0% { opacity:0; transform: scale(0.5, 0.5);}
		70% { opacity:0; transform: scale(0.5, 0.5);}
		100% { opacity:1; transform: scale(1, 1); }
	}
	.wrapper .seed1{
		position:absolute;
		top:100px;
		left:0;
		animation: seed1 2.8s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed1{
		0% { opacity:0; transform: translate(50px, 100px);}
		90% { opacity:0; transform: translate(50px, 100px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper .seed2{
		position:absolute;
		top:150px;
		right:0;
		animation: seed2 2.9s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed2{
		0% { opacity:0; transform: translate(-50px, 100px);}
		90% { opacity:0; transform: translate(-50px, 100px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper .seed3{
		position:absolute;
		top:300px;
		left:0;
		animation: seed3 3s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed3{
		0% { opacity:0; transform: translate(100px, 50px);}
		90% { opacity:0; transform: translate(100px, 50px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper .seed4{
		position:absolute;
		top:320px;
		right:0;
		animation: seed4 3.1s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed4{
		0% { opacity:0; transform: translate(-100px, 50px);}
		90% { opacity:0; transform: translate(-100px, 50px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper p.bible{
		position:absolute;
		top:64%;
		left:50%;
		margin-left:-170px;
		border:1px solid rgba(29,109,119); 
		border-radius:15px;
		padding:5px; 
		text-align:center;
		color:#ffffff;
		font-size:14px;
		width:340px; 
		background: rgba(29,109,119,0.5);
		animation: titletext 4s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes titletext{
		0% { opacity:0; transform: translate(0, 20px);}
		90% { opacity:0; transform: translate(0, 20px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper p.title{
		position:absolute;
		top:45px;
		left:50%;
		margin-left:-200px;
		border:1px solid rgba(29,92,56); 
		border-radius:0 0 30px 30px; 
		padding:15px 15px 5px 15px; 
		text-align:center;
		color:#ffffff;
		font-size:15px;
		width:400px; 
		background: rgba(29,92,56,0.8);
	}
	
}


@media all and (min-width:1200px) {
	/* Scrollspy */
	#section1 {}
	#section2 {padding:70px 50px 50px 50px; background-image:url("../img/section2_bg.jpg"); background-size:100%; background-attachment: fixed;}
	#section4 {padding:70px 50px 50px 50px;background-color: #e6e6e6;}
	#section3 {padding:70px 50px 50px 50px;background-image:url("../img/section4_bg.gif"); }
	#section5 {padding:70px 50px 50px 50px;background-color:#a0d4df; }
	#section6 {padding:70px 50px 50px 50px;background-image:url("../img/section5_bg.jpg"); background-size:100%; background-attachment: fixed;}
	#section7 {padding:50px 50px 50px 50px;background-color: #fff;}
	#section8 {
		padding:50px 50px 280px 50px;color: #fff; 
		background-color: #f6a39f; 
		background-image:url("../img/section8_bg.png"); 
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size:50%;
		background-position: center bottom;
	}

	#section2 #s4 {
		margin:0;
		background-color:rgba(255,255,255,0.8); 
		border-radius:30px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		padding:30px;
	}

	#section2 #s1 {
		margin:30px 0 0 0;
		background-color:rgba(255,255,255,0.8); 
		border-radius:30px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		padding:30px;
	}
	#section2 #s3 {
		margin:30px 0 0 0;
		background-color:rgba(255,255,255,0.8); 
		border-radius:30px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		background-image: url("../img/section2_img1m.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size:100%;
		padding:30px;
	}
	#section2 #s2 {
		background-color:rgba(255,255,255,0.8);  
		border-radius:30px;
		box-shadow:10px 10px 10px rgba(0,0,0,0.2);
		padding:30px;
		margin:30px 0 0 0;
	}
	#section4 img {padding:10px; width:100%;}
	#section4 .text {padding:40px 20px}
	#section3 img {width:100%; margin:0 auto; padding-bottom:10px;}
	#section5 #box {background-color:rgba(255,255,255,0.7); border:1px solid #fff; border-radius:15px; padding:10px}


		.button_vt {
		padding:10px 20px;
		border:2px solid #d958a4;
		border-radius:30px;
		font-size:18px;
		background-color:#fef4dc;
		color:#d958a4;
	}
	.button_vt:hover {
		background-color:#d958a4;
		border:2px solid #d958a4;
		color:#ffffff;
	}

	.button_bl {
		padding:10px 20px;
		border:1px solid #2d99b1;
		background-color: #fef4dc;
		font-size:16px;
		color:#fff;
	}
	.button_bl:hover {
		background-color:#1d6e80;
		border:1px solid #1d6e80;
	}
	.button_orange {
		padding:10px 20px;
		border:2px solid #f2613a;
		border-radius:30px;
		font-size:18px;
		background-color:#fef4dc;
		color:#e95927;
	}
	.button_orange:hover {
		background-color:#f2613a;
		border:2px solid #f2613a;
		color:#ffffff;
	}
	.button_green {
		padding:10px 20px;
		border:2px solid #71b125;
		border-radius:30px;
		font-size:18px;
		background-color:#fef4dc;
		color:#71b125;
	}
	.button_green:hover {
		background-color:#71b125;
		border:2px solid #71b125;
		color:#ffffff;
	}

	.invisibla {
		opacity:0;
		transition:opacity 1s ease;
	}
	.visible {
		opacity:1;
	}




	.f1 {font-size:50px; text-align:center; font-weight:bold; padding-bottom:30px; text-align:center;	}
	.f2 {font-size:35px; margin:20px 0;}
	.f3 {font-size:20px;}
	.f4 {font-size:15px}

	.display_pc { display:block;}
	.display_m { display:none;}
	.display_desktop { display:block;}


	.wrapper {
		width:100%;
		height:auto;
		padding-top: 55%;
		position:relative;
		background-color:#addce2;
		background-size: 1000px;
		overflow: hidden;
	}
	.wrapper .flower_top{
		position:absolute;
		width:100%;
		top:50px; 
		animation: flower_top 1.0s 0s 1 ease-in forwards normal;
	}
	@keyframes flower_top{
		0% { opacity:0; margin:-50px 0 0 0;}
		30% { opacity:0; margin:-50px 0 0 0;}
		100% { opacity:1; margin:0; }
	}
	.wrapper .flower_bt{
		position:absolute;
		width:100%;
		bottom:0; 
		animation: flower_bt 3s 0s infinite ease-in forwards alternate;

	}
	@keyframes flower_bt{
		0% { margin:0 0 -15px 0;}
		100% { margin:0; }
	}
	.wrapper .jesus{
		position:absolute;
		bottom:0; 
		animation: jesus 2s 0s infinite ease-in forwards alternate;
		transform-origin: right;
	}
	@keyframes jesus{
		0% { transform: rotate(0deg);}
		100% { transform: rotate(-3deg);}
	}

	.wrapper .girl{
		position:absolute;
		bottom:-20px; 
		animation: girl 5s 0s infinite ease-in forwards alternate;
	}
	@keyframes girl{
		0% { margin:0 0 0 0;}
		10% { margin:0 0 -5px 5px;}
		20% { margin:0 0 0 10px;}
		30% { margin:0 0 -5px 15px;}
		40% { margin:0 0 0 20px;}
		50% { margin:0 0 -5px 25px;}
		60% { margin:0 0 0 30px;}
		70% { margin:0 0 -5px 35px;}
		80% { margin:0 0 0 40px;}
		90% { margin:0 0 -5px 45px;}
		100% { margin:0 0 0 50px;}
	}
	.wrapper .boy{
		position:absolute;
		bottom:280px;
		left:0px; 
		animation: boy 2s 0s infinite ease-in forwards alternate;
		transform-origin: left;
	}
	@keyframes boy{
		0% { transform: rotate(0deg);}
		50% { transform: rotate(0deg);}
		100% { transform: rotate(-3deg);}
	}
	.wrapper .titleimg{
		position:absolute;
		top:120px;
		width:100%;
		animation: titleimg 2.0s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;

	}

	@keyframes titleimg{
		0% { opacity:0; transform: scale(0.5, 0.5);}
		70% { opacity:0; transform: scale(0.5, 0.5);}
		100% { opacity:1; transform: scale(1, 1); }
	}
	.wrapper .seed1{
		position:absolute;
		top:100px;
		left:0;
		animation: seed1 2.8s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed1{
		0% { opacity:0; transform: translate(50px, 100px);}
		90% { opacity:0; transform: translate(50px, 100px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper .seed2{
		position:absolute;
		top:150px;
		right:0;
		animation: seed2 2.9s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed2{
		0% { opacity:0; transform: translate(-50px, 100px);}
		90% { opacity:0; transform: translate(-50px, 100px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper .seed3{
		position:absolute;
		top:400px;
		left:0;
		animation: seed3 3s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed3{
		0% { opacity:0; transform: translate(100px, 50px);}
		90% { opacity:0; transform: translate(100px, 50px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper .seed4{
		position:absolute;
		top:400px;
		right:0;
		animation: seed4 3.1s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes seed4{
		0% { opacity:0; transform: translate(-100px, 50px);}
		90% { opacity:0; transform: translate(-100px, 50px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper p.bible{
		position:absolute;
		top:70%;
		left:50%;
		margin-left:-200px;
		border:1px solid rgba(29,109,119); 
		border-radius:15px;
		padding:10px; 
		text-align:center;
		color:#ffffff;
		font-size:16px;
		width:400px; 
		background: rgba(29,109,119,0.5);
		animation: titletext 4s 0s 1 cubic-bezier(.54,1.28,.85,1.16) forwards normal;
	}
	@keyframes titletext{
		0% { opacity:0; transform: translate(0, 20px);}
		90% { opacity:0; transform: translate(0, 20px);}
		100% { opacity:1; transform: translate(0, 0); }
	}
	.wrapper p.title{
		position:absolute;
		top:50px;
		left:50%;
		margin-left:-200px;
		border:1px solid rgba(29,92,56); 
		border-radius:0 0 30px 30px; 
		padding:15px 15px 5px 15px; 
		text-align:center;
		color:#ffffff;
		font-size:17px;
		width:400px; 
		background: rgba(29,92,56,0.8);
	}
}